<template>
  <div class="list-container">
    <van-nav-bar title="花语" left-arrow @click-left="Pages('/home')">
    </van-nav-bar>
    <div class="content img-list">
      <div
        v-for="(item, index) in lflowerFlowerList"
        :key="index"
        class="content-item"
        @click="pages(item)"
      >
        <img
          :src="item.picUrl"
          style="height: 140px; margin-top: 10px"
          alt=""
        />
        <span style="margin-top: 5px; font-size: 13px">{{ item.name }}</span>
        <div style="display: flex; justify-content: space-between">
          <span style="color: red; font-size: 12px">{{
            "花语：" + item.text
          }}</span>
          <span style="font-size: 12px; color: gray">{{
            "寓意：" + item.desc
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      lflowerFlowerList: [],
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    Pages(path) {
      if (this.$route.path === path) {
        return;
      }
      this.$router.push({
        path: path,
      });
    },
    pages(item) {
      this.$router.push({
        path: "/infoDetail",
        query: {
          ...item,
        },
      });
    },
    getData() {
      axios({
        url: "http://127.0.0.1:3000/index/list/huayu",
        method: "get",
      }).then((res) => {
        console.log("首页返回信息", res);
        this.lflowerFlowerList = res.data;
      });
    },
  },
};
</script>

<style scope lang='scss'>
.list-container {
  background: #fafafa;

  .header {
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
  }
  .img-list {
    flex-wrap: wrap;
    img {
      height: 150px;
      width: 200px;
      margin: 0 auto;
    }
  }
  .content {
    display: flex;
    width: 100%;
    .content-item {
      display: flex;
      flex-direction: column;
      height: 300px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
</style>